<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 组件-标题栏 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<view class="component-title-bar" :style="{background: backgroundColor, position: positionMode}">
		<view class="title-bar-status" :style="{height: statusBarHeight + 'px'}"></view>
		<view class="title-bar-address flex align-items-center" :style="{height: titleBarHeight + 'px'}" @click="toSelectCity()" v-if="showAddress">
			<text class="text text-ellipsis">{{currentCity.city || "请选择"}}</text>
			<image class="icon" src="/static/down.png" mode="aspectFit"></image>
		</view>
		<view class="title-bar-main" :style="{height: titleBarHeight + 'px'}" v-else-if="!hideTitle">
			<view class="main-back" v-if="showBack" @click="goBack()">
				<image class="icon" src="/static/back_w.png" mode="aspectFit" v-if="frontColor == 'white'"></image>
				<image class="icon" src="/static/back.png" mode="aspectFit" v-else></image>
			</view>
			<view class="main-title">
				<view class="title text-ellipsis" :style="{color: frontColor, fontSize: titleFontSize + 'px'}">{{title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		name: 'componentTitleBar',
		props: {
			// 组件标题
			title: {
				type: String,
				default: ""
			},
			// 组件背景色
			backgroundColor: {
				type: String,
				default: "#fff"
			},
			// 组件文字颜色
			frontColor: {
				type: String,
				default: "#242629"
			},
			// 是否显示返回按钮
			showBack: {
				type: Boolean,
				default: false
			},
			// 是否隐藏标题栏
			hideTitle: {
				type: Boolean,
				default: false
			},
			// 定位模式
			positionMode: {
				type: String,
				default: "sticky"
			},
			// 用户类型 passenger-乘客端，driver-司机端
			channelType: {
				type: String,
				default: "passenger"
			},
			// 是否显示地址选择
			showAddress: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 标题栏高度
				titleBarHeight: 0,
				// 标题文字尺寸
				titleFontSize: 16,
			}
		},
		computed: {
			...mapState({
				currentCity: state => state.app.currentCity,
			})
		},
		mounted() {
			// #ifdef MP-WEIXIN
			this.titleFontSize = uni.getAppBaseInfo().fontSizeSetting || 16
			this.statusBarHeight = uni.getWindowInfo().statusBarHeight
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
			// #endif
			// #ifndef MP-WEIXIN
			let systemInfo = uni.getSystemInfoSync()
			this.titleFontSize = systemInfo.fontSizeSetting || 16
			this.statusBarHeight = systemInfo.statusBarHeight
			this.titleBarHeight = 48
			// #endif
		},
		methods: {
			// 返回上一页
			goBack() {
				if (getCurrentPages().length == 1) {
					if (this.channelType == "driver") {
						this.$util.toPage({
							mode: 3,
							path: "/pages/driver/index/index"
						})
					} else {
						uni.switchTab({
							url: "/pages/passenger/index/index",
							fail: () => {
								this.$util.toPage({
									mode: 3,
									path: "/pages/driver/index/index"
								})
							}
						})
					}
				} else {
					uni.navigateBack()
				}
			},
			// 前往选择城市
			toSelectCity() {
				this.$util.toPage({
					mode: 1,
					path: "/pages/public/select/province"
				})
			},
		},
	}
</script>

<style lang="scss">
	.component-title-bar {
		position: sticky;
		top: 0;
		z-index: 998;
		width: 100%;

		.title-bar-status {
			width: 100%;
		}

		.title-bar-main {
			display: flex;
			align-items: center;
			width: 100%;
			height: 0;
			overflow: hidden;
			padding: 0 25%;

			.main-back {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 32rpx;

				.icon {
					position: absolute;
					top: 0;
					left: 0;
				}
			}

			.main-title {
				position: relative;
				width: 100%;
				flex: 1;

				.title {
					color: #242629;
					text-align: center;
					font-size: 32rpx;
					line-height: 44rpx;
				}
			}
		}

		.title-bar-address {
			padding: 0 32rpx;

			.text {
				color: #242629;
				font-size: 32rpx;
				font-weight: 600;
				line-height: 44rpx;
			}

			.icon {
				width: 24rpx;
				height: 24rpx;
				min-width: 24rpx;
				margin-left: 8rpx;
			}
		}
	}
</style>